<template>
	<view class="container">
		<view class="seletion-box">
			<u-subsection  :list="list" :current="current" @change="sectionChange" active-color="#17CC77" bgColor="#e8e8e8"></u-subsection>
		</view>
		<view class="list-container" v-if="orders && orders.length>=1">
			<view class="list-item" v-show="listShow" v-for="(item,index) in orders" :key="index">
				<view class="item-top">
					<u-image width="172rpx" height="172rpx" :src="item.landPicture"></u-image>
					<view class="text-box">
						<view class="title">租赁人：{{item.fosterName}}</view>
						<view class="wight">租赁周期：{{item.tenancyDuration}}</view>
						<view class="wight">租赁地块数量：{{item.tenancyNum}}块</view>
					</view>
					<view class="price-box">
						<view class="price">￥{{item.rent}}</view>
					</view>
				</view>
				<view class="orderNumber">订单号：<text class="numbers">{{item.orderNo}}</text></view>
				<view class="orderNumber">订单时间：<text class="numbers">{{item.createTime}}</text></view>
				<view class="item-bottom">
					<view class="btns">
						<u-button v-if="current == 0" :customStyle="btnStyle" type="info" text="付款" plain shape="circle" @click="goOrderDetail(item)"></u-button>
						<u-button v-if="current == 1 || current == 2" :customStyle="btnStyle" type="info" text="详情" plain shape="circle" @click="goOrderDetail(item)"></u-button>
					</view>
				</view>
			</view>
			<view class="bottom-button" v-show="listShow"  @click="checkMore">{{orders && orders.length >= total ? '没有更多数据了':'查看更多'}}</view>
		</view>
		<view class="notice" v-else>
			<u--text type="primary" algin="center" text="没有数据哦"></u--text>
		</view>
	</view>
</template>

<script>
	import {findUserOrderInfo} from "@/api/api.js"
	export default {
		data() {
			return {
				btnStyle:{
					height:48+"rpx",
					marginRight:10+'rpx',
					width:200+'rpx'
				},
				list: ['未付款', '已付款','已取消'],
				current:0,
				pageNum:1,
				total:'',
				orders:[],
				listShow:true,
				payParams:{},
			};
		},
		onLoad(routerParams) {
			if(routerParams.state){
				this.current = routerParams.state*1
			}else{
				this.current = 0
			}
			this.getData()
		},
		onshow(){
		},
		methods:{
			async getData(){
				let query = `pageNum=${this.pageNum}&pageSize=${4}&state=${this.current}`
				const res = await findUserOrderInfo(query)
				if(res?.data.code == 200){
					console.log(res);
					this.total = res.data.data.total
					if(this.orders.length >= this.total)return
					this.orders = this.orders.concat(...res.data.data.rows)
					setTimeout(()=>{
						this.listShow = true
					},300)
					console.log(this.orders);
				}else{
					uni.$u.toast(res.data.msg)
				}
			},
			checkMore(){
				this.pageNum++
				this.getData()
			},
			goOrderDetail(item){
				uni.navigateTo({
					url:`/pages/user/orderDetail?id=${item.tenancyId}&orderNo=${this.current ? '':item.orderNo}`
				})
			},
			sectionChange(i){
				this.current = i
				this.pageNum = 1
				this.orders = []
				this.listShow = false
				this.getData()
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-text{
		flex-direction: unset !important;
		justify-content: center !important;
	}
	::v-deep.u-button{
		background-color: red !important;
		height:40rpx !important;
	}
	.bottom-button{
			border-top: 2rpx solid #f3f3f3;
			text-align: center;
			line-height: 80rpx;
			font-size: 28rpx;
			color: #17CC77;
		}
	.container{
		.seletion-box{
			
		}
		.list-container{
			padding: 20rpx 30rpx;
			overflow: auto;
			.list-item{
				background-color: #ffffff;
				box-shadow: 2rpx 2rpx 0 0 #dadada;
				border-radius: 24rpx;
				margin-bottom: 30rpx;
				padding: 25rpx;
				.orderNumber{
					font-size: 26rpx;
					padding: 10rpx;
					color: #555555;
				}
				.item-top{
					display: flex;
					align-items: center;
					border-bottom: 2rpx solid #cccccc;
					padding: 20rpx;
					.text-box{
						padding-left: 10rpx;
						height: 100%;
						width: 55%;
						font-size: 28rpx;
						color: #555555;
						.numbers{
							font-size: 20rpx;
						}
						view{
							padding-bottom: 10rpx;
						}
					}
					.price-box{
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						margin-right: 10rpx;
						color: #868686;
						.price{
							font-size: 36rpx;
							color:#FF3E25
						}
					}
				}
				.item-bottom{
					display: flex;
					justify-content: flex-end;
					.btns{
						width: 60%;
					}
				}
			}
		}
		.notice{
			height: 100vh;
			display: flex;
			align-items: center;
		}
	}
</style>
